Interactive animations with variable fonts 可變字型的互動式動畫

變數字型是一種特殊的字型格式，它可以讓字型在不同樣式之間平滑過渡，非常適合用來製作簡單的動畫效果。

Simple Hover Effects 懸停效果示例

當滑鼠懸停在連結上時，字型會改變粗細。普通字型在懸停時會突然變化，但使用變數字型可以讓這個變化變得更加平滑自然，使用的字型：Newsreader。

使用變數字型可實現平滑懸停效果，變化更加自然。注意控制動畫時間，避免影響體驗。字型變粗可能導致佈局偏移，特別是在選單等小型元素中。

將每個元素放在固定容器中，避免佈局偏移的懸停動畫效果。

Multiplexing Beyond Weight 等寬字型與字重調整

在一些情況下，我們不希望字型變化時影響佈局，

等寬字型可以讓不同粗細的變體佔用相同空間寬度，使懸停效果更流暢，同時避免佈局變化。它可以在不影響字型寬度的情況下調整字型的視覺重量。

目前支援等寬變化的字型：https://v-fonts.com/tags/C9

Multiplexing Beyond Weight 字型變化的多種可能性

變數字型不僅可以調整字重，還能實現更多有趣的變化效果。比如有些字型可以調整斜體樣式而不影響字間距，還有一些字型提供更獨特的變化效果，讓設計更加生動。使用字型：Cheee Variable。

製作互動效果時，懸停不僅限於連結。您可以用span標籤包裹任意元素來觸發懸停效果，還可以調整過渡時間來控制動畫速度。